<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>javascript</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }
    .box {
        width: 300px;
        overflow: hidden;
        max-height: 300px;
        background-color: #333;
    }
    p {
        padding: 10px
    }
    .fade-enter, .fade-leave-to {
        max-height: 0px
    }
    .fade-enter-to {
        max-height: 300px;
    }
    .fade-enter-active, .fade-leave-active {
        transition: all .6s linear
    }
  </style>
</head>
<body>
  <div id="app">
      <div style="height: 200px; width: 100px; background: red;"></div>
      <span ref="title">{{title}}</span>
      <div @click="change">修改名字</div>
    <div onclick="openH()">新窗口</div>
      <transition name="fade">
        <div class="box" v-if="tag">
            <p>11</p>
            <p>22</p>
            <p>333</p>
            <p>44</p>
            <p>55</p>
            <p>666</p>
            <p>777</p>
            <p>888</p>
        </div>
      </transition>
      <button @click="toggle">toggle{{number}}</button>
      <child v-model="number">
          <template #default="item">
            {{ item.list.title }}
          </template>
      </child>
  </div> 
</body>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script>
    class Child {
        constructor () {
            this.hello1 = function() {
                console.log('heolo')
            }
        }
        static show () {
            console.log('static')
        }
        // 原型方法
        hello () {
            console.log('hello')
        }
    }
    const child1 = new Child()
    console.dir(child1)
    var a = 4
    if (a > 3) {
        var b = a
        var c = b + a
    }
    function test() {
        var a = 1
        var b = a + 3
        console.log(b)
        test2()
    }
    function test2() {
        var a = 2
        var b = 3-1
    }
    test()
    var b = 4
    Number.prototype.add = function(val) {
        return this.valueOf() + val
    }
    Number.prototype.jian = function(val) {
        return this.valueOf() - val
    }
    var month = {1:222, 2:123, 5:888}
    let arr = []
    for (let i = 1; i <= 12; i++) {
        arr.push(month[i] || null)
    }
    console.log(arr)
    var child = Vue.component('child', {
        template: '<div><slot :list="{title: 123}"></slot>{{title}}{{total}}<span @click="change">change</span></div>',
        props: {
            value: {
                type: Number,
                default: 0
            }
        },
        data() {
            console.log(this)
            return {
                title: this.value
            }
        },
        methods: {
            change () {
                this.total = this.value * 6
            }
        },
        computed: {
            total: {
                get () {
                    return this.value * 4
                },
                set (val) {
                    this.title  = val
                    this.$emit('input',val)
                }
            }
        }
    })
    var vm = new Vue({
        el: "#app",
        beforeCreate () {
        },
        data: {
            title: 'zhangli',
            number: 4,
            tag: false,
            list: [
                {
                    id: 123,
                    status: 1
                },
                {
                    id: 1234,
                    status: 2
                },
                {
                    id: 12345,
                    status: 3
                }
            ]
        },
        methods: {
            getStatus (id) {
                return this.list.find((item, index) => {
                    return item.id === id
                })
            },
            toggle () {
                this.tag = !this.tag你                                                                                           
            },
            change () {
                this.title = 'chentian'
                console.log(this.title)
                Vue.nextTick(() => {
                    console.log(this.$refs.title.innerHTML)
                })
                this.$nextTick(() => {
                    console.log(this.$refs.title.innerHTML)
                })
                
            }
        },
        mounted () {
            sessionStorage.setItem('tag',22)
            var str = {
                id: 123,
                status: this.getStatus(1234)
            }
            console.log(str)
        }
    })
    function openH() {
        window.open('../../', '_blank ')
    }
</script>
</html>